<template>
  <div id="J_ContBox" class="m-content-box">
    <div class="m-set-order-box">
      <p class="title">
        提醒设置
      </p>

      <router-link to="/liansuo/integralset">
        <el-button class="set-order-edit" type="primary">返回</el-button>
      </router-link>

      <ul id="remindSetting" class="remindSetting-list" v-loading="loading">
        <li>
          <div class="item" style="height: 45px;display: flex;align-items: center;justify-content: center;">
            <span class="label">获取方式：</span>
            <div class="content">
              <el-radio-group v-model="ruleForm.methods">
                <el-radio :label="1">预约</el-radio>
                <el-radio :label="2">签到</el-radio>
              </el-radio-group>
            </div>
          </div>
        </li>
        <li>
          <div class="item" style="height: 45px;display: flex;align-items: center;justify-content: center;">
            <span class="label">获取方式：</span>
            <div class="content">
              <el-radio-group v-model="ruleForm.getcondition">
                <el-radio :label="1">签到得积分</el-radio>
                <el-radio :label="2">仅会员自主签到得积分</el-radio>
              </el-radio-group>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <span class="label">通用卡团课签到得积分：</span>
            <div class="content">
              <el-input v-model="ruleForm.tuanke" style="width: 82px; margin-right: 5px;" type="number" placeholder="请输入0~100的整数" />积分/次
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <span class="label">通用卡精品课签到得积分：</span>
            <div class="content">
              <el-input v-model="ruleForm.jingpinke" style="width: 82px; margin-right: 5px;" type="number" placeholder="请输入0~100的整数" />积分/次
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <span class="label">通用卡私教课签到得积分：</span>
            <div class="content">
              <el-input v-model="ruleForm.sijiaoke" style="width: 82px; margin-right: 5px;" type="number" placeholder="请输入0~100的整数" />积分/次
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="m-form-footer-btns">
      <el-button type="primary" class="mar-right20" @click="submit()">保存</el-button>
      <router-link to="/liansuo/integralset">
        <el-button class="" type="info">取消</el-button>
      </router-link>

    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex'
import { integralsetedit, integralsetinfo } from '@/api/brand' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      value: true,
      loading: false,
      datalist: {},
      ruleForm: {
        methods: 1,
        getcondition: 1,
        tuanke: 0,
        jingpinke: 0,
        sijiaoke: 0

      }
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '提醒设置',
      url: '/system/memberRemind',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  methods: {
    submit() {
      this.loading = true
      integralsetedit(this.ruleForm).then(response => {
        const {
          data
        } = response
        console.log('修改积分设置', data)
        this.$router.back()
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    getList() {
      this.loading = true
      integralsetinfo({}).then(response => {
        const {
          data
        } = response
        console.log('获取积分设置', data)
        if (data) {
          Object.keys(this.ruleForm).forEach((key) => {
            if (data[key] !== undefined) this.ruleForm[key] = data[key]
          })
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    open(type) {
      if (type === 'add') {
        this.add_show = false
      }
      if (type === 'update') {
        this.update_show = false
      }
    }

  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px;
}
.top-btn-group {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: -18px;
  margin-bottom: 12px;
}
.setting-tips__normal {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border: 1px dashed #f49352;
  color: #f49352;
}
.m-set-order-box {
  position: relative;
  margin-bottom: 30px;
}
.mb-30 {
  margin-bottom: 30px;
}
.tips-icon {
  margin-right: 8px;
}
img {
  max-width: 100%;
}
img {
  border: 0;
}
.m-set-order-box .title {
  position: relative;
  color: #787878;
  font-size: 12px;
  height: 22px;
}
.set-normal-list li:nth-child(odd) {
  background: #f2f2f2;
}

.set-normal-list li {
  position: relative;
  min-height: 19px;
  padding: 10px 10px 10px 170px;
}
.set-normal-list .label {
  position: absolute;
  left: 10px;
  top: 10px;
}
ul, dl, ol {
  list-style: none;
  padding: 0;
  margin-top: 0;
}
p {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
.set-order-edit {
  position: absolute;
  right: 0;
  top: -20px;
}
.m-set-order-box .title .status {
  position: absolute;
  right: 150px;
}
.set-normal-list .status {
  position: absolute;
  right: 110px;
  top: 10px;
}
.remindSetting-list .item {
  position: relative;
  padding: 4px 0;
}
.remindSetting-list .item .lock {
  position: absolute;
  right: 120px;
  top: 7px;
}
.remindSetting-list .item .label {
  position: absolute;
  left: 10px;
  top: 10px;
}
.remindSetting-list .item .content {
  width: 320px;
  margin: 0 auto;
}
.remindSetting-list .item .sublabel {
  display: inline-block;
  width: 115px;
  text-align: right;
  padding-right: 5px;
}
.remindSetting-list li:nth-child(odd) {
  background: #f2f2f2;
}
.m-form-footer-btns {
  padding: 40px 0;
  text-align: center;
}
</style>
